<template>
  <div :ref="setRef" class="score_chart"></div>
</template>

<script>
export default {
  name: 'ScoreChart',
  props: {
    setRef: {
      type: String
    },
    chartData: {
      type: Object,
      default () {
        return {
          passCount: 0,
          notPassCount: 0,
        }
      }
    }
  },
  mounted () {
    this.calcChartData()
  },
  methods: {
    // 计算图表数据
    calcChartData () {
      let legendData = [
        {
          name: '及格',
          icon: 'pin'
        },
        {
          name: '不及格',
          icon: 'pin'
        }
      ]
      let seriesData = [
        {
          name: '及格',
          value: this.chartData.passCount,
          itemStyle: {
            color: '#50D5AC'
          }
        },
        {
          name: '不及格',
          value: this.chartData.notPassCount,
          itemStyle: {
            color: '#FFD559'
          }
        }
      ]
      this.initChart({
        legendData,
        seriesData
      })
    },
    // 渲染图表
    initChart (obj) {
      let myChart = this.$echarts.init(this.$refs[this.setRef])

      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'horizontal',
          bottom: 0,
          data: obj.legendData
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '50%'],
            data: obj.seriesData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.2)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .score_chart {
    width: 100%;
    height: 195px;
  }
</style>
